<template>
  <ListTable
    @getData="handleCallback"
    v-model="columns"
    :total
    :dataList="scenicList"
    placeholder="景区名称"
  >
    <template #select>
      <n-button @click="addRigion" style="margin-right: 20px" type="info">
        添加景区
      </n-button>

      <n-select
        clearable
        placeholder="类型"
        v-model:value="selectType"
        :options="typeOptions"
      />

      <n-cascader
        clearable
        placeholder="地区"
        :show-path="false"
        label-field="name"
        value-field="name"
        children-field="children"
        v-model:value="selectRegion"
        :options="regionOptions"
        @update:value="handleUpdateRegion"
      />
    </template>
  </ListTable>

  <DetailModel v-model="detailVisible" :data="detailData" />
  <AddForm
    v-model:visible="addVisible"
    :data="formData"
    @close="formData = null"
    @submit="getData"
  />
</template>

<script setup lang="ts">
import { createVNode } from 'vue'
import { getScenicList, addScenic, updateScenic, deleteScenic } from '@/api'
import { mapToLabelValue, updateParams } from '@/utils'
import { PARAMS, SCENIC_TYPE } from '@/constant'
import { NButton } from 'naive-ui'

import DetailModel from './components/DetailModel.vue'
import AddForm from './components/AddForm.vue'
import ListTable from '@/components/ListTable.vue'

const message = useMessage()
const dialog = useDialog()

const detailVisible = ref(false)
const detailData = ref(null)
const getRigionDetail = async row => {
  detailData.value = row
  detailVisible.value = true
}

const addVisible = ref(false)
const formData = ref({})
const addRigion = async () => {
  addVisible.value = true
}
const updateRigion = async row => {
  addVisible.value = true
  formData.value = row
}

const deleteRigion = row => {
  dialog.warning({
    title: `是否删除"${row.spot}"?`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const res = await deleteScenic(row.id)
      message.success(res)

      total.value--
      const index = scenicList.value.findIndex(item => item.id === row.id)
      scenicList.value.splice(index, 1)
    }
  })
}

let params = PARAMS
const typeOptions = mapToLabelValue(SCENIC_TYPE)
const selectType = ref(null)

watch(selectType, async val => {
  params = updateParams(params, 'type', val && +val)
  await getData(params)
})

const { default: regionData } = await import('#/citypicker.json')
const regionOptions = regionData
const selectRegion = ref(null)

const handleUpdateRegion = async (val: any) => {
  params = updateParams(params, 'region', val)
  await getData(params)
}

const total = ref(0)
const scenicList = ref([])
const getData = async (
  params = {
    pageNum: 1,
    pageSize: 10
  }
) => {
  const { total: count, list } = await getScenicList(params)
  total.value = count
  scenicList.value = list
}

await getData()

const createColumns = (): DataTableColumns<any> => {
  return [
    {
      title: '#',
      key: 'index',

      render(_, index) {
        return index
      }
    },
    {
      title: '名称',
      ellipsis: {
        tooltip: true
      },
      render(row) {
        return row.spot
      }
    },
    {
      title: '地区',
      ellipsis: {
        tooltip: true
      },
      render(row) {
        return row.region
      }
    },
    {
      title: '地址',
      ellipsis: {
        tooltip: true
      },
      render(row) {
        return row.addr
      }
    },
    {
      title: '类型',
      render(row) {
        return SCENIC_TYPE[row.type]
      }
    },
    {
      title: '浏览量',
      key: 'page_view',
      sortOrder: false,
      sorter: 'default',
      render(row) {
        return row.page_view
      }
    },
    {
      title: '操作',
      render(row) {
        const buttons = [
          {
            text: '详情',
            type: 'primary',
            onClick: () => getRigionDetail(row)
          },
          {
            text: '编辑',
            type: 'warning',
            onClick: () => updateRigion(row)
          },
          {
            text: '删除',
            type: 'error',
            onClick: () => deleteRigion(row)
          }
        ]

        return buttons.map(button => {
          return createVNode(
            NButton,
            {
              text: true,
              type: button.type,
              onClick: button.onClick,
              style: 'margin-right: 10px;'
            },
            () => button.text
          )
        })
      }
    }
  ]
}
const columns = ref(createColumns())

const handleCallback = async (val: any) => {
  params.pageNum = val.pageNum

  params = updateParams(params, 'spot', val.keyword)
  params = updateParams(params, 'sort', val.sorter && val.sorter.slice(0, -3))

  await getData(params)
}
</script>

<style scoped lang="scss"></style>
